<template>
	<el-card class="box-card">
		<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
		  	<el-tab-pane label="新人红包" name="first">
		  		<el-form :model="formData" ref="formData" :rules="rules" label-width="200px">
					<el-form-item label="红包金额：" prop="newPoint">
						<el-input v-model="formData.newPoint" type="number" auto-complete="off" placeholder="新人红包金额，人民币" style="width:50%"></el-input>
					</el-form-item>
					<el-form-item label="红包数量：" prop="newCount">
						<el-input v-model="formData.newCount" type="number" placeholder="输入新人获得的红包数量" style="width:50%"></el-input>
					</el-form-item>
					<el-form-item prop="maxPercent" label="红包使用条件百分比：">
						<el-input v-model="formData.maxPercent" type="number" placeholder="输入百分比数字" style="width:50%"></el-input>
						<span>%</span>
					</el-form-item>
					<div style="margin-bottom: 20px;margin-left: 60px;color:red;">
						说明：红包金额<=课程总遛点换算的人民币价格比例的时候，才能符合使用条件
					</div>
				</el-form>
				<el-button type="primary" @click="saveRedBag('formData')" style="width:100%;margin-top: 10px;">保存</el-button>
		  	</el-tab-pane>
		  	<el-tab-pane label="分享红包" name="second">
		  		<el-form :model="shareFormData" ref="shareFormData" :rules="shareRules" label-width="200px">
					<el-form-item  label="分享红包数量：" prop="shareCount">
						<el-input v-model="shareFormData.shareCount" type="number" placeholder="输入红包数量" style="width:50%"></el-input>
					</el-form-item>
					<el-form-item  label="红包倍数的起始数：" prop="shareStart">
						<el-input v-model="shareFormData.shareStart" type="number" placeholder="红包倍数的起始数" style="width:50%"></el-input>
					</el-form-item>
					<el-form-item  label="红包倍数的结束数：" prop="shareEnd">
						<el-input v-model="shareFormData.shareEnd" type="number" placeholder="红包倍数的结束数" style="width:50%"></el-input>
					</el-form-item>
					<div style="margin-bottom: 20px;margin-left: 60px;color:red;">
						<p>说明：设定分享红包的随机倍数，如果两个数字相等，所有红包都一样金额</p>
						<p>假设红包倍数随机到数字4，红包数字=4*1遛点对应的人民币数量</p>
					</div>
					<el-form-item prop="shareMaxPercent" label="红包使用条件百分比：">
						<el-input v-model="shareFormData.shareMaxPercent" type="number" placeholder="输入百分比数字" style="width:50%"></el-input>
						<span>%</span>
					</el-form-item>
					<div style="margin-bottom: 20px;margin-left: 60px;color:red;">
						说明：红包金额<=课程总遛点换算的人民币价格比例的时候，才能符合使用条件
					</div>
				</el-form>
				<el-button type="primary" @click="saveShareRedBag('shareFormData')" style="width:100%;margin-top: 10px;">保存</el-button>
			</el-tab-pane>
		</el-tabs>
		
	</el-card>
</template>

<script>
	import { redBagConfigSave, redBagConfigUpdate, getRedBagConfig } from "@/api/getData"
	export default {

		data() {
			var validateNewPoint = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入红包金额'));
				} else {
					let reg =  /^\+?[1-9][0-9]*$/;
					if(!reg.test(value)) {
						callback(new Error('请输入整数'));
					}
					callback();
				}
			};
			var validateNewCount = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入红包数量'));
				} else {
					let reg =  /^\+?[1-9][0-9]*$/;
					if(!reg.test(value)) {
						callback(new Error('请输入整数'));
					}
					callback();
				}
			};
			var validateShareCount = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入分享红包数量'));
				} else {
					let reg =  /^\+?[1-9][0-9]*$/;
					if(!reg.test(value)) {
						callback(new Error('请输入整数'));
					}
					callback();
				}
			};
			var validateShareStart = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入分享红包起始金额'));
				} else {
					let reg =  /^\+?[1-9][0-9]*$/;
					if(!reg.test(value)) {
						callback(new Error('请输入整数'));
					}
					callback();
				}
			};
			var validateShareEnd = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入分享红包结束金额'));
				} else {
					let reg =  /^\+?[1-9][0-9]*$/;
					if(!reg.test(value)) {
						callback(new Error('请输入整数'));
					}
					callback();
				}
			};
			var validateMaxPercent = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入使用条件百分比'));
				} else {
					let reg =  /^\+?[1-9][0-9]*$/;
					if(!reg.test(value)) {
						callback(new Error('请输入整数'));
					}
					callback();
				}
			};
			return {
				activeName:"first",
				formData: {
					newPoint: "",
					newCount: "",
					maxPercent: "",
					shareCount: "",
					shareStart: "",
					shareEnd: "",
					shareMaxPercent:"",
					id: "",
				},
				shareFormData: {
					newPoint: "",
					newCount: "",
					maxPercent: "",
					shareCount: "",
					shareStart: "",
					shareEnd: "",
					shareMaxPercent:"",
					id: "",
				},
				rules: {
					newPoint: [{
						validator: validateNewPoint,
						trigger:  'blur'
					}],
					newCount: [{
						validator: validateNewCount,
						trigger:  'blur'
					}],

					maxPercent: [{
						validator: validateMaxPercent,
						trigger: 'blur'
					}],
				},
				shareRules:{
					shareCount: [{
						validator: validateShareCount,
						trigger:  'blur'
					}],
					shareStart: [{
						validator: validateShareStart,
						trigger: 'blur'
					}],
					shareEnd: [{
						validator: validateShareEnd,
						trigger: 'blur'
					}],
					shareMaxPercent: [{
						validator: validateMaxPercent,
						trigger: 'blur'
					}],
				}

			}
		},

		mounted() {
			this.getRedBagConfig();
		},
		methods: {
		    handleClick(tab, event) {
	       	 	this.getRedBagConfig();
	        },
			async getRedBagConfig() {
				const res = await getRedBagConfig();
				if(res.code == "0") {
					this.formData = res.obj;
					this.shareFormData = res.obj;
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			saveRedBag(formName) {
				this.$refs[formName].validate(async(valid) => {
					if(valid) {
						let res = null;
						if(this.formData.id != "") {
							res = await redBagConfigUpdate(this.formData);
						} else {
							res = await getRedBagConfig(this.formData);
						}
						if(res.code == "0") {
							this.$notify({
								title: '成功',
								message: '保存成功',
								type: 'success',
								offset: 100
							});
						} else {
							this.$notify.error({
								title: '错误',
								message: res.msg,
								offset: 100
							});
						}
					}
				});
			},
			saveShareRedBag(formName) {
				this.$refs[formName].validate(async(valid) => {
					if(valid) {
						let res = null;
						if(this.shareFormData.id != "") {
							res = await redBagConfigUpdate(this.shareFormData);
						} else {
							res = await getRedBagConfig(this.shareFormData);
						}
						if(res.code == "0") {
							this.$notify({
								title: '成功',
								message: '保存成功',
								type: 'success',
								offset: 100
							});
						} else {
							this.$notify.error({
								title: '错误',
								message: res.msg,
								offset: 100
							});
						}
					}
				});
			},

		},
	}
</script>

<style scoped>
	.box-card {
		margin: 0 10px;
	}
	
</style>